<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
  <h2>测试：v-for 遍历数组</h2>
    <ul>
        <li v-for="(p,index) in persons" :key="index">
           {{index}} -- {{p.name}} -- {{p.age}}
            --- <button @click="deleteP(index)">删除</button>
            --- <button @click="updateP(index,{name: 'Cat',age: 20})">更新</button>
        </li>
    </ul>
  <h2>测试：v-for 遍历对象</h2>
    <ul>
        <li v-for="(value,key) in persons[1]" :key="key">
            {{value}} -- {{key}}
        </li>
    </ul>
</div>

<script type="text/javascript" src="../../js/vue.js"></script>
<script>
  const vm = new Vue({
      el:'#app',
      data: {
          persons: [ //vue本身只是监视了person的改变，没有监视数组内部数据的改变
              {name: 'tom',age: 18},
              {name: 'jack',age: 19},
              {name: 'tony',age: 17},
              {name: 'lucy',age: 14},
          ]
      },
      methods: {
          deleteP(index){
              //删除persons指定index的p
              this.persons.splice(index,1);
          },
          updateP(index,newP){
              // this.persons[index] = newP; //数组内部发生了变化
              // this.persons = [];
              this.persons.splice(index,1,newP);
          }
      }
  })
</script>
</body>
</html>